<template>

	<el-container>
		<el-aside width="70%">
			<textarea style="background-color: #000000;border-radius: 0.625rem;padding: 0.625rem;color: #FFFFFF;" :disabled="disabled" 
				cols="150" rows="20" v-model="UnvarnishedList"></textarea>
		</el-aside>
		<el-container>
			<el-main>
				<textarea style="background-color: #F0F7FF;border-radius: 0.625rem;padding: 0.625rem;" cols="60"
					rows="10" :placeholder="$t('wel.table.please_enter_tran')" v-model="Unvarnished"></textarea>
			</el-main>
			<el-footer>
				<el-button type="primary" @click="SendUnvarnished" style="margin-top: 0rem;">{{$t('wel.table.send_out')}}</el-button>
			</el-footer>
		</el-container>
	</el-container>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import request from '@/router/axios';
	import {
		baseUrl
	} from '@/config/env';

	export default {
		name: "wel",
		props: {
			id: {
				type: Number,
				default: 0
			},
			code: {
				type: String,
				default: ''
			}
		},

		data() {
			return {
				disabled:true,
				UnvarnishedList:"",
				Unvarnished:'',
				ws:null,
			}
		},
		computed: {
...mapGetters(["userInfo"]),
		},
		created() {
			this.websocket();
		},
		methods: {
			websocket() {
				if (this.ws == null) {
					this.ws = new WebSocket('wss://cloudsocket.ebyte.com')
				}
			
				this.ws.onopen = () => {
					console.log("连接成功");
					let message = {
						'type': 'login',
						'uid': this.userInfo.id,
					}
					this.ws.send(JSON.stringify(message));
					console.log('数据发送中...')
				}
				this.ws.onmessage = evt => {
					var data = JSON.parse(evt.data)
					if (data.type == 'postMessage') {
						this.UnvarnishedList = this.UnvarnishedList + data.id + "    ↑    " + data.message + "    " + "\n";
					}
				}
				this.ws.onclose = function() {
					// 关闭 websocket
					console.log('连接已关闭...尝试重新连接')
					this.ws = new WebSocket('wss://cloudsocket.ebyte.com')
				}
				// 组件销毁时调用，中断websocket链接
				this.over = () => {
					this.ws.close()
				}
			},
			
			//发送透传指令
			SendUnvarnished() {
				let that = this;
				var items = [];
				request({
						headers: {
							"Content-Type": "application/json;charset=utf-8",
						},
						method: "post",
						url: baseUrl + "userapi/Equipment/UnvarnishedTransmission",
						data: {
							"message": this.Unvarnished,
							'id': [that.id]
						}
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
							return;
						} else if (response.data.status == 1) {
							that.UnvarnishedList = that.UnvarnishedList + that.code + "    ↓    " + that
								.Unvarnished + "    " +
								"\n";
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error(that.$t("wel.table.System_error"));
					});
			},
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.wel {
		&__header {
			padding: 25px 40px;
			border-bottom: 1px solid #e8e8e8;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&__info {
			display: flex;
			align-items: center;

			&-img {
				border-radius: 72px;
				display: block;
				width: 72px;
				height: 72px;

				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			&-content {
				position: relative;
				margin-left: 24px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}

			&-title {
				font-size: 20px;
				line-height: 28px;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 12px;
			}

			&-subtitle {
				position: relative;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}
		}

		&__extra {
			&-item {
				position: relative;
				padding: 0 32px;
				display: inline-block;

				&:last-child {
					&::after {
						display: none;
					}
				}

				&:after {
					background-color: #e8e8e8;
					position: absolute;
					top: 30px;
					right: 0;
					width: 1px;
					height: 40px;
					content: "";
				}
			}

			&-title {
				color: rgba(0, 0, 0, 0.45);
				font-size: 14px;
				line-height: 22px;
				margin-bottom: 4px;
			}

			&-subtitle {
				color: rgba(0, 0, 0, 0.85);
				font-size: 30px;
				line-height: 38px;
				margin: 0;

				span {
					color: rgba(0, 0, 0, 0.45);
					font-size: 20px;
				}
			}
		}
	}
</style>
